# Refs

<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/refs" />

👨‍💼 Our users want a button they can click to increment a count a bunch of times.
They also like fancy things. So we're going to package it in a fancy way.

In this exercise we're going to use a completely different example. We're going
to make a `<Tilt />` component that renders a div and uses the
[`vanilla-tilt` library](https://micku7zu.github.io/vanilla-tilt.js/) to make it
super fancy.

The thing is, `vanilla-tilt` works directly with DOM nodes to setup event
handlers and stuff, so we need access to the DOM node. But because we're not the
one calling `document.createElement` (React does) we need React to give it to
us.

So in this exercise we're going to use a `ref` so React can give us the DOM node
and then we can pass that on to `vanilla-tilt`.

Additionally, we'll need to clean up after ourselves if this component is
unmounted. Otherwise we'll have event handlers dangling around on DOM nodes that
are no longer in the document which can cause a memory leak.

The emoji will guide you. Enjoy!
